<template>
  <div class="shopcar">
    <!-- 返回上一页 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="goBack" />

    <!-- 清空购物车按钮 -->
    <div class="button-group">
      <van-button class="removeAll" type="danger" size="small" @click="removeAll">清空购物车</van-button>
    </div>

    <!-- 无购物车列表 -->
    <template class="noList" v-if="!goodsList.length">
      <div class="message">
        <van-icon class="icon" name="shopping-cart-o"></van-icon>
        <span class="text">暂无商品~</span>
      </div>
    </template>

    <!-- 有购物车列表 -->
    <template>
      <van-swipe-cell class="swipeCell" v-for="(item,idx) of goodsList" :key="idx">
        <div class="card">
          <van-checkbox class="checkBox" v-model="item.isChecked"></van-checkbox>

          <van-image class="image" :src="item.img" />

          <div class="center">
            <div class="name">{{item.name}}</div>
            <div class="type">规格:{{item.sku}}</div>
            <div class="bottom">
              <p class="price">{{item.price | toFixed | rmb}}</p>
              <div class="num">
                <van-stepper integer v-model="item.num" />
              </div>
            </div>
          </div>
        </div>
        <template slot="right">
          <van-button class="delate" square type="danger" text="删除" @click="removeItem(idx)" />
        </template>
      </van-swipe-cell>
    </template>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="allTotal" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>

    <!-- 底部菜单栏 -->
    <tab-bar></tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [] //商品列表数据
    };
  },
  computed: {
    allChecked: {
      //全选
      get() {
        let bool;
        if (this.goodsList.length) {
          bool = this.goodsList.every(item => {
            return item.isChecked;
          });
        } else {
          bool = false;
        }
        return bool;
      },
      set(newVal) {
        if (!newVal) {
          this.goodsList.map(item => {
            item.isChecked = false;
          });
        } else {
          this.goodsList.map(item => {
            item.isChecked = true;
          });
        }
      }
    },
    allTotal() {
      //总计
      let sum = 0;
      this.goodsList.forEach(item => {
        if (item.isChecked) {
          sum += item.price * item.num;
        }
      });
      return sum * 100;
    }
  },
  methods: {
    goBack() {
      //返回上一页
      this.$router.go(-1);
    },
    getShopCarList() {
      //获取商品列表数据
      this.goodsList = JSON.parse(localStorage.getItem("goodsList"));
      console.log(this.goodsList);
    },
    removeItem(idx) {
      //删除其中一个成员
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "是否要删除该商品？"
        })
        .then(() => {
          this.goodsList.splice(idx, 1); //data的数据
          goodsList.splice(idx, 1); //本地缓存数据
          localStorage.setItem("goodsList", JSON.stringify(goodsList)); //重新设置本地缓存
          this.$toast.success("删除成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    removeAll() {
      //清空购物车
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      this.$dialog
        .confirm({
          title: "清空购物车",
          message: "是否要清空购物车?"
        })
        .then(() => {
          this.goodsList = []; //清空data数据
          goodsList = []; //清空本地缓存
          localStorage.setItem("goodsList", JSON.stringify(goodsList)); //重新设置本地缓存
          // localStorage.removeItem("goodsList")//删除本地缓存
        })
        .catch(() => {});
    }
  },
  created() {
    this.getShopCarList();
  }
};
</script>

<style lang="scss">
@import "@/style/shopcar/shopcar";
</style>





// 问题：为什么刷新了还是会出现？
// 原因：本地缓存还在
// 解决思路：获取本地缓存的数据，删除相应的选项，删除之后把剩余的数据重新存储到本地缓存里面